<template>
  <div class="detail-header">
    <div class="detail-header-con detail-header-con-more" :class="'order-status'+orderStatus">
      <div class="status">
        <i v-if="detailData.is_presale == 1">【预售】</i>
        <span class="j-status">{{detailData.status_name}} {{detailData.remarks}}</span>
      </div>
      <div class="order-no create-time">
        <span v-if="detailData.status == 3">交易完成时间：</span>
        <span v-else>创建时间：</span>
        <span class="j-create_time" v-if="detailData.status == 3">{{detailData.end_time}}</span>
        <span class="j-create_time" v-else>{{detailData.create_time}}</span>
      </div>
      <div class="create-time" v-if="detailData.store_reservation">
        <span>预约时间：</span>
        <span class="j-order_no">{{showTime()}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { formatDay, formatHMS } from '@/utils/index'

export default Vue.extend({
  props: {
    detailAll: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    OrderUrl(idx) {
      const query = {
        id: this.detailData.order_id,
        supid: this.detailData.delivery_supplier[idx][0]
      }
      if (this.otherData.gys == 'gys') {
        query.identity = 'gys'
      }
      this.$emit('OrderUrl', query)
      // this.$JumpPath(this, path, query)
    },
    showTime() {
      const start_time = this.detailData.store_reservation.start_time
      const end_time = this.detailData.store_reservation.end_time
      return `${formatDay(start_time)} ${formatHMS(
        start_time,
        'm'
      )} ~ ${formatHMS(end_time, 'm')}`
    }
  },
  computed: {
    detailData() {
      return this.detailAll.detail
    },
    orderStatus() {
      return this.detailAll.detail.status
    }
  }
})
</script>

<style lang="scss">
// @import 'src/styles/variables.scss';
// @import 'src/styles/mixin';
@import "src/styles/order/detail";
</style>